<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>		
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<style type="text/css">
			.flexbox dd {
				text-align: left;
			}
			
			.flexbox dl:first-child {
				-moz-box-flex: 2;
				-webkit-box-flex: 2;
			}
			
			.flexbox dl:nth-child(2) {
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
			}
			
			.cointop {
				padding: 20px;
			}
			
		
		</style>
	</head>
<body>
	<header class="mui-bar mui-bar-nav" id='header'>
		<a class="mui-action-back mui-icon white-mid mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title white-big">黑皮书</h1>
		<a class="mui-icon mui-icon white-mid mui-pull-right"></a>
	</header>
	<div class="mui-content">
		<div class="cointop">
			<div class="flexbox">
				<h1 class="rmb black24">￥90.37</h1> &nbsp;
				<p class="tl blacker-small uom">EOS/柚子</p>
			</div>
			<div class="flexbox">
				<dl>
					<dd class="blacker-small grey-light priUsd ">$16.34</dd>
					<dd class="blacker-small mkVal">市值：￥1210.0亿</dd>
					<dd class="blacker-small changeNum">全球交易量(24h)：￥13.244亿</dd>
				</dl>
				<dl class="flortVal">
					<dd class="org-bigest">+3.50%</dd>
				</dl>
			</div>
		</div>

		<div class="mui-slider">
			<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted hps-bg-slider">
				<a class="mui-control-item" href="#item1">所属榜单</a>
				<a class="mui-control-item" href="#item2">基本信息</a>
			</div>
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6 mt_2"></div>
			<div class="mui-slider-group">
				<div id="item1" class="mui-slider-item mui-control-content mui-active">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<h3 class="blacker-big">每日币市龙虎榜</h3>
							<section>
								<dl class="leftslide fl">
									<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
									<dd>
										<span class="grey-light">总数：3</span>
										<span class="grey-light">上涨：2</span>
										<span class="grey-light">下跌：1</span>
									</dd>
									<dd>
										<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl' />
										<i class="m-icon-bluev"></i>
										<span class="blacker-small">金木研</span>
										<span class="grey-light">创建</span>
									</dd>
								</dl>

								<dl class='rightslide fr'>
									<dd class="tr blacker-small">平均涨跌</dd>
									<dd class="tr green-big">+1.29%</dd>
									<dt>
	        					<p>
	        						<span class="iconfont icon-yanjing org-75b"></span>
	        						<span class='grey-smaller '>2100</span>
	        						<span class="iconfont icon-xingxing org-f0b"></span>
	        						<span class="grey-smaller ">1920</span>
	        					</p>
	        				</dt>
								</dl>
							</section>
						</li>
						<li class="mui-table-view-cell">
							<h3 class="blacker-big">每日币市龙虎榜</h3>
							<section>
								<dl class="leftslide fl">
									<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
									<dd>
										<span class="grey-light">总数：3</span>
										<span class="grey-light">上涨：2</span>
										<span class="grey-light">下跌：1</span>
									</dd>
									<dd>
										<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl' />
										<i class="m-icon-bluev"></i>
										<span class="blacker-small">金木研</span>
										<span class="grey-light">创建</span>
									</dd>
								</dl>

								<dl class='rightslide fr'>
									<dd class="tr blacker-small">平均涨跌</dd>
									<dd class="tr green-big">+1.29%</dd>
									<dt>
	        					<p>
	        						<span class="iconfont icon-yanjing org-75b"></span>
	        						<span class='grey-smaller '>2100</span>
	        						<span class="iconfont icon-xingxing org-f0b"></span>
	        						<span class="grey-smaller ">1920</span>
	        					</p>
	        				</dt>
								</dl>
							</section>
						</li>
						<li class="mui-table-view-cell">
							<h3 class="blacker-big">每日币市龙虎榜</h3>
							<section>
								<dl class="leftslide fl">
									<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
									<dd>
										<span class="grey-light">总数：3</span>
										<span class="grey-light">上涨：2</span>
										<span class="grey-light">下跌：1</span>
									</dd>
									<dd>
										<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl' />
										<i class="m-icon-bluev"></i>
										<span class="blacker-small">金木研</span>
										<span class="grey-light">创建</span>
									</dd>
								</dl>

								<dl class='rightslide fr'>
									<dd class="tr blacker-small">平均涨跌</dd>
									<dd class="tr green-big">+1.29%</dd>
									<dt>
	        					<p>
	        						<span class="iconfont icon-yanjing org-75b"></span>
	        						<span class='grey-smaller '>2100</span>
	        						<span class="iconfont icon-xingxing org-f0b"></span>
	        						<span class="grey-smaller ">1920</span>
	        					</p>
	        				</dt>
								</dl>
							</section>
						</li>
					
						
					</ul>

				</div>

				<!--币种详情介绍-->
				<div id="item2" class="mui-slider-item mui-control-content infodetails">
					<p class="grey-lighter mui-ellipsis-3" id='descrbword'>
						EOS是引入的一种新的区块链框架，旨在实现分布式应用的性能扩展。注意，他不是像比特币和以太坊那样的贷币，注意，他不是像比特币和以太坊那样的贷币，而是基于EOS软件项目之上发布的贷币，被
					</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a>
								名称
								<p><span class="cionname blacker-small positiabsou uom"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								市值
								<p><span class="market blacker-small positiabsou mkVal"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								流通量
								<p><span class="liquidity blacker-small positiabsou circulatingSupply"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								流通率
								<p><span class="liutonglv blacker-small positiabsou mFlowrate"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								总量
								<p><span class="totalissue blacker-small positiabsou totalSupply"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								募集成本
								<p><span class="raisecosts blacker-small positiabsou mPrice"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								发行时间
								<p><span class="releasetime positiabsou mPubtime"></span></p>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a>
								网站
								<p><span class="webname positiabsou">http:eos.io</span></p>
							</a>
						</li>
					</ul>

				</div>
			</div>
		</div>
	</div>
<input type="hidden" id="mid" />
<input type="hidden" id="hid" />
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/config.js"  charset="utf-8"></script>
<script type="text/javascript">
/*	mui('.mui-scroll-wrapper').scroll({
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});*/
	mui.init()
	mui.plusReady(function() {
        var self = plus.webview.currentWebview();
        var hid = self.hid;
        var mid = self.mid;
        var symbol = self.symbol;
        $("#hid").val(hid);
        $("#mid").val(mid);
        init(mid,hid,symbol);
    });
    function init(mid,hid,uom){
    	mui.ajax(mkurl+'/api/market/findud', {
			data: {hid:hid,mid:mid,symbol:uom},
			dataType: 'json',
			type: 'post',
			success: function(data) {
				if(data.status==1){
					var mk=data.result.marketDto;
					//头部信息
					var priCny = mk.priceCny.toFixed(2);
					var mkval = (mk.volume24h.toFixed(2)* mk.priceCny.toFixed(4)/100000000).toFixed(2);
					var cls = "org-bigest";
					var valStr = mk.percent24h;
					if(valStr < 0){
						cls ="org-redest";
					}else{
						valStr ="+"+valStr;
					}
					$(".black24").html("￥:"+priCny);
					$(".uom").html(uom+"/"+mk.name);
					$(".priUsd").html("$"+mk.price);
					$(".mkVal").html("市值：￥"+mkval+"亿");
					$(".changeNum").html("全球交易量(24h)："+mk.volume24h.toFixed(2));
					$(".flortVal").html('<dd class="'+cls+'">'+valStr+'%</dd>');
					//币信息
					var pro = data.result.hProject;
					$(".circulatingSupply").html(mk.circulatingSupply);
					$(".totalSupply").html(mk.totalSupply);
					$(".mFlowrate").html(pro.mFlowrate+"%");
					$(".mPrice").html("$"+pro.mPrice);
					$(".mPubtime").html(pro.mPubtime);
				}else{
					alert(2);
				}
			},
			error: function(xhr, type, errorThrown) {
				//异常处理；
				console.log(type);
			}
		});
    }
</script>
</body>

</html>